<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  setup: () => {
    const option = ref({
      title: {
        text: "MBTI班级分布占比",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["ENFJ", "ENFP", "ENTJ", "ENTP", "ESFJ","ESFP","ESTJ","ESTP","INFJ","INFP","INTJ","INTP","ISTJ","ISTP","ISFJ","ISFP"]
      },
      series: [
        {
          name: "Traffic Sources",
          type: "pie",
          radius: "70%",
          center: ["50%", "60%"],
          data: [
            { value: 2, name: "ENFJ"},
            { value: 3, name: "ENFP"},
            { value: 4, name: "ENTJ"},
            { value: 2, name: "ENTP"},
            { value: 2, name: "ESFJ"},
            { value: 3, name: "ESFP"},
            { value: 4, name: "ESTJ"},
            { value: 2, name: "ESTP"},
            { value: 2, name: "INFJ"},
            { value: 3, name: "INFP"},
            { value: 4, name: "INTJ"},
            { value: 2, name: "INTP"},
            { value: 2, name: "ISFJ"},
            { value: 3, name: "ISFP"},
            { value: 4, name: "ISTJ"},
            { value: 2, name: "ISTP"}         
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    });

    return { option };
  }
});
</script>

<style scoped>
.chart {
  height: 650px;
}
</style>